<template>
    <div>
        <el-table
            :data="routes"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            @cell-dblclick="columnClick"
        >
        <el-table-column prop="id" label="ID" sortable />
        <el-table-column prop="title" label="标题">
            <template #default="scope">
                <span v-if="scope.row['editorId_'+scope.row.id+'_'+scope.column.no]">
                    <el-input :ref="setInputRefs(scope.row.id,scope.column.no)" v-model="scope.row.title" @blur="closeEditor(scope)" />
                </span>
                <span v-else>{{ scope.row.title }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="组件名称">
            <template #default="scope">
                {{ scope.row.name }}
                <!-- 后面的数据如果需要双击编辑，可参考标题做法，已经实现逻辑，复制修改属性即可，如下： -->
                <!-- <span v-if="scope.row['editorId_'+scope.row.id+'_'+scope.column.no]">
                    <el-input :ref="setInputRefs(scope.row.id,scope.column.no)" v-model="scope.row.name" @blur="closeEditor(scope)" />
                </span>
                <span v-else>{{ scope.row.name }}</span> -->
            </template>
        </el-table-column>
        <el-table-column prop="path" label="访问路径" />
        <el-table-column prop="component" label="组件地址" />
        <el-table-column prop="redirect" label="重定向" />
        <el-table-column prop="isshow" label="是否显示" align="center">
            <template #default="scope">
                <el-switch v-model="scope.row.isshow" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="changeIsShow(scope.row)"></el-switch>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="parent_id" label="父路由ID" /> -->
        <el-table-column label="操作" min-width="150px">
            <template #default="scope">
                <el-button v-btnPermission="'admin:routes:add'" size="small" type="primary" @click="handleAdd(scope.row)">新增子路由</el-button>
                <el-button v-btnPermission="'admin:routes:edit'" size="small" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button v-btnPermission="'admin:routes:delete'" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
     </el-table>
    </div>
</template>

<script setup>
    import useRouteStore from '@/stores/modules/routes'
    import { nextTick, onMounted, ref, toRaw, toRefs } from 'vue';
    import { confirmBox,msgBox } from "@/utils/dialog";
    import { useRouter } from 'vue-router';
    const routeStore = useRouteStore()
    const router = useRouter()

    let routes = ref([])

    onMounted(()=>{
        getRoutes()
    })

    const getRoutes = async ()=>{
        routes.value = await routeStore.getRoutes()
    }

    const handleAdd = (route)=>{
        router.push({name:'addroute',query:{pid:route.id}})
    }

    const handleEdit = (route)=>{
        router.push({name:'editroute',query:{id:route.id}})
    }

    const handleDelete = (route)=>{
        confirmBox(`您确认删除ID为${route.id}的路由吗？`,()=>{
            routeStore.deleteRoute(toRaw(route),()=>{
                getRoutes()
                window.location.reload()
            })
        })
    }

    const changeIsShow = async (route)=>{
        let requestData = toRaw(route)
        let result = await routeStore.updateRoute(requestData['id'],requestData)
        if(result['code'] === 200) msgBox('修改成功')
    }

    let inputsRef = ref({})
    const setInputRefs = (id,no) => {
        return (el) => {
            if (el) {
                // 创建一个动态的ref对象
                inputsRef.value['editorId_'+id+'_'+no] = el;
            }
        };
    }
    const columnClick = (row, column, cell, event)=>{
        let editorId = `editorId_${row.id}_${column.no}`
        row[editorId] = true
        nextTick(() => {
            inputsRef.value[editorId].focus()
        })
    }

    const closeEditor = async (scope) => {
        let result = await routeStore.updateRoute(scope.row['id'],scope.row)
        if(result['code'] === 200) msgBox('修改成功')
        scope.row['editorId_'+scope.row.id+'_'+scope.column.no] = false
    }
</script>

<style scoped>
:deep(.el-form-item__label){
    color:#fefefe;
}
</style>